<template>
  <view class="feedback-page">
    <u-navbar back-icon-type="arrow-left" title="问题反馈" />

    <!-- 问题反馈输入框 -->
    <view class="feedback-container">
      <u-textarea
        v-model="feedbackText"
        placeholder="请输入要反馈的内容"
        rows="5"
        auto-height
        border
      ></u-textarea>
    </view>

    <!-- 提交按钮 -->
    <view class="submit-button">
      <u-button type="primary" @click="submitFeedback">我要反馈</u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      feedbackText: '',
    };
  },
  methods: {
    submitFeedback() {
      if (!this.feedbackText.trim()) {
        // 如果输入为空，提示用户
        uni.showToast({
          title: '请输入反馈内容',
          icon: 'none',
          duration: 2000,
        });
        return;
      }

      // 发送请求到后端
      uni.request({
        url: 'https://your-backend-api-url/feedback', // 替换为你的后端API地址
        method: 'POST',
        data: {
          content: this.feedbackText,
        },
        success: (res) => {
          if (res.statusCode === 200) {
            // 成功提交反馈
            uni.showToast({
              title: '反馈提交成功',
              icon: 'success',
              duration: 2000,
            });
            this.feedbackText = ''; // 清空输入框
          } else {
            // 处理其他状态码
            uni.showToast({
              title: '反馈提交失败，请稍后再试',
              icon: 'none',
              duration: 2000,
            });
          }
        },
        fail: (err) => {
          // 处理请求错误
          uni.showToast({
            title: '网络请求失败，请检查网络连接',
            icon: 'none',
            duration: 2000,
          });
          console.error('提交反馈失败:', err);
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.feedback-page {
  padding: 30rpx 30rpx 0; // 增加顶部内边距以避免被导航栏遮挡
}

.feedback-container {
  margin-top: 20rpx; // 增加顶部外边距以确保内容不会紧贴导航栏
  padding: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.submit-button {
  text-align: center;
  margin-top: 30rpx;
}

.u-textarea {
  flex: 1; // 使 textarea 占据容器的大部分空间
  min-height: 300rpx; // 最小高度
  max-height: 400rpx; // 最大高度
}
</style>